<template>
  <div style="padding: 10px;">
    <el-card style="padding: 10px;">
      <el-row>
        关键字：<el-input v-model="params.keyWord" placeholder="请输入申请人或者说明" size="small" style="width: 200px;"></el-input>
        <el-button type="primary" size="small" style="margin: 0 10px;" @click="getList"
          v-if="$hasBP('btn.apply.select')">查询</el-button>
        <el-button type="success" size="small" @click="addPrice" v-if="$hasBP('btn.apply.add')">申请班费</el-button>
      </el-row>

      <el-row style="margin-top: 10px;">
        <el-table ref="multipleTable" :data="appList" tooltip-effect="dark" style="width: 100%" border>
          <el-table-column prop="applicantName" label="申请人" align="center">
          </el-table-column>

          <el-table-column prop="applicantPrice" label="申请金额" align="center">
          </el-table-column>
          <!-- <el-table-column prop="reviewerName" label="审批人" align="center">
          </el-table-column> -->
          <el-table-column prop="className" label="班级" align="center">

          </el-table-column>
          <el-table-column prop="applicantType" label="申请类型" align="center">
            <template #default="{row,$index}">
              {{row.applicantType==0?'支出':'收入'}}
            </template>
          </el-table-column>

          <el-table-column prop="applicantTime" label="申请时间" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.applicantTime | formatCreateTimes }}</template>
          </el-table-column>
          <el-table-column prop="applicantStatus" label="申请状态" align="center">
            <template #default="{row,$index}">
              <!-- {{?:''}} -->
              <span v-show="row.applicantStatus==0">待审</span>
              <span v-show="row.applicantStatus==1">通过</span>
              <span v-show="row.applicantStatus==2">拒接</span>
            </template>
          </el-table-column>
          <el-table-column prop="notes" label="说明" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template #default="{row,$index}">
              <div v-if="row.applicantStatus==0&&$hasBP('btn.apply.del')">
                <el-button type="danger" @click="delAppl(row)" size="small" v-if="row.show">撤销</el-button>
              </div>
              <el-button type="success" size="small" style="margin-top: 5px;"
                v-if="$hasBP('btn.apply.examine')&&row.applicantStatus==0" @click="examine(row)">同意</el-button>
              <el-button type="danger" size="small" style="margin-top: 5px;"
                v-if="$hasBP('btn.apply.reject')&&row.applicantStatus==0" @click="reject(row)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row style="float: right;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="params.pageNum" :page-sizes="[5, 10, 30, 50]" :page-size="params.PageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </el-card>


    <el-dialog title="申请" :visible.sync="isAddorUpdateShow" width="30%">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="申请金额" prop="applicantPrice">
          <el-input v-model="form.applicantPrice" size="small"></el-input>
        </el-form-item>
        <el-form-item label="申请类型" prop="applicantType">
          <el-select v-model="form.applicantType" placeholder="请选择" size="small">
            <el-option :key="0" label="支出" :value="0"></el-option>
            <el-option :key="1" label="收入" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="form.notes" size="small"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAddorUpdateShow = false">取 消</el-button>
        <el-button type="primary" @click="affirm('form')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    formatDate
  } from '../../../utils/date.js'
  import { mapGetters } from 'vuex'
  export default {
    name: 'Appli',

    data() {
      return {
        params: {
          pageNum: 1,
          pageSize: 10,
          keyWord: ""
        },
        isShowUpdate: true,
        appList: [],
        isShowUpdateName: '',
        isAddorUpdateShow: false,
        form: {
        },
        rules: {
          applicantPrice: [
            { required: true, message: '请输入申请金额', trigger: 'blur' }
          ],
          applicantType: [
            { required: true, message: '请输入选择', trigger: 'change' }
          ]
        },
        total: 0
      };
    },

    mounted() {
      this.getList()

    },
    computed: {
      ...mapGetters([
        'type',
        'info'
      ])
    },
    filters: {
      formatCreateTimes(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd  hh:mm:ss')
      }
    },
    methods: {
      getList() {
        this.$api.cla.getAppPriceList(this.params).then(res => {
          if (res.code == 200) {
            this.appList = res.data
            this.total = res.pageParams.total
            if (this.type == 2) {
              this.appList.forEach(item => {
                if (item.applicantName === this.info.stuName) {
                  this.$set(item, 'show', true);
                } else {
                  this.$set(item, 'show', false);
                }
              });
            } else if (this.type == 1) {
              this.appList.forEach(item => {
                item.show = false
              });
            } else {
              this.appList.forEach(item => {
                item.show = true
              });
            }
            console.log(this.appList);
          }
        })
      },
      addPrice() {
        this.isAddorUpdateShow = true
        this.form = {}
      },
      affirm(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$api.cla.addAppl(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success("申请成功~")
                this.getList()
                this.isAddorUpdateShow = false
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      delAppl(row) {
        console.log(row);
        this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
          this.$api.cla.delAppl(row.id).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success("删除成功~")
              this.getList()
            }
          })
        }).catch(() => { })
      },
      examine(row) {
        this.$api.cla.examineApply(row).then(res => {
          if (res.code == 200) {
            this.$message.success("审批成功~")
            this.getList()
          }
        })
      },
      reject(row) {
        this.$confirm('是否继续暂停该学生申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.cla.rejectApply(row.id).then(res => {
            if (res.code == 200) {
              this.$message.success("拒接成功~")
              this.getList()
            }
          })
        }).catch(() => { })


      },
      handleSizeChange(val) {
        this.params.pageSize = val
        this.getList()
      },
      handleCurrentChange() {
        this.params.pageNum = val
        this.getList()
      }
    },

  };
</script>

<style lang="scss" scoped>

</style>